import React, { Component, useState } from "react";
let useToggle = () => {
  let [flag, setFlag] = useState(true);
  let toggle = () => {
    setFlag(!flag);
  };
  return { flag, toggle };
};
let  AB = () => {
  let [flag, setFlag] = useState(true);
  let toggle = () => {
    setFlag(!flag);
  };
  return { flag, toggle };
};
export default function A() {
  let { flag, toggle } = useToggle();
 
  
  return (
    <div>
      <h1>自定义hooks</h1>
      <p>
        概念：自定义hook是以use打头的函数，通过自定义hook函数可以用来实现逻辑的封装和复用
      </p>
      <h1>ReactHooks使用规则</h1>
      <p>1.只能在组件中或则其他自定义Hook函数中调用</p>
      <p>2.只能在组件的顶层调用，不能嵌套在if、for、其他函数中</p>
     
      {flag && (
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Est eveniet
          adipisci itaque, ab dolor repudiandae ex deleniti eaque ratione sit
          incidunt nesciunt maxime placeat quas, natus deserunt sapiente quia
          fugit.
        </p>
      )}
      <button onClick={toggle}>切换显示</button>
    </div>
  );
}
